<script setup lang="ts">
import * as echarts from "echarts";
import {useScreenStore} from "@/hooks/screen";
import {skyNoticeError} from "@/utils/sky";
import {getRedis} from "@/apis/sky/data/redis";
import {Monitor, Odometer, PieChart} from "@element-plus/icons-vue";

// 获取当前为[移动端、IPad、PC端]仓库，阔以使用 watchEffect(() => {}) 进行监听。
const {isScreen} = useScreenStore();
/** 适配移动端结束 */

const pageData = ref({
  form: {
    redis_version: "",
    redis_mode: "",
    tcp_port: "",
    connected_clients: "",
    uptime_in_days: "",
    used_memory_human: "",
    used_cpu_user: "",
    maxmemory_human: "",
    aof_enabled: null,
    rdb_last_bgsave_status: "",
    mem_allocator: "",
    db5: {
      keys: "",
    },
  },
});
const method = reactive({
  /** 获取redis信息 */
  handleGetRedis: async () => {
    try {
      const res: any = await getRedis();
      pageData.value.form = res.data;
      method.handleInitChart(res.data.commandStats);
      method.handleInfoMemory(res.data.used_memory);
    } catch (error) {
      skyNoticeError("数据获取失败，请刷新重试🌻");
    }
  },
  /** 初始化信息 */
  handleInitChart: (data: any) => {
    let chartDom = document.getElementById('main');
    let myChart = echarts.init(chartDom);
    let option: any;
    option = {
      color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      toolbox: {
        show: true,
      },

      series: [
        {
          name: '业务警种',
          type: 'pie',
          radius: [0, 150],
          data: data,
        }
      ]
    };
    option && myChart.setOption(option);
  },
  /** 初始化内存占用 */
  handleInfoMemory: (data: any) => {
    let chartDom = document.getElementById('memory');
    let myChart = echarts.init(chartDom);
    let option: any;
    option = {
      title: {
        text: "内存占用率",
        x: "50%",
        y: "45%",
        textAlign: "center",
        textStyle: {
          fontWeight: "normal",
          fontSize: 24,
        },
        subtextStyle: {
          fontWeight: "bold",
          fontSize: 32,
          color: "#3ea1ff",
        },
      },
      series: [
        {
          name: " ",
          type: "pie",
          radius: ["50%", "70%"],
          startAngle: 225,
          color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#00a2ff",
              },
              {
                offset: 1,
                color: "#70ffac",
              },
            ]),
            "transparent",
          ],
          hoverAnimation: false,
          legendHoverLink: false,
          itemStyle: {
            normal: {
              borderColor: "transparent",
              borderWidth: "20",
            },
            emphasis: {
              borderColor: "transparent",
              borderWidth: "20",
            },
          },
          z: 10,
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 75,
            },
            {
              value: 25,
            },
          ],
        },
        {
          name: "",
          type: "pie",
          radius: ["50%", "70%"],
          startAngle: 225,
          color: ["#c2f5e1", "transparent"],
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 75,
            },
            {
              value: 25,
            },
          ],
        },
      ],
    };
    let num = (data / 1024 / 1024).toFixed(2)
    option.title.subtext = num + "M";
    option.series[0].data[0].value = num;
    option.series[0].data[1].value = 100 - num;
    option && myChart.setOption(option);
  },
});
onMounted(() => {
  method.handleGetRedis();
});
</script>

<template>
  <div>
    <el-card v-if="!isScreen" class="rounded-md dark:bg-black" shadow="hover">
      <template #header>
        <div style="align-items: center" class="flex">
          <el-icon>
            <Monitor/>
          </el-icon>
          <span class="ml2">基本信息</span>
        </div>
      </template>
      <el-form :model="pageData.form" :inline="true" label-width="120px">
        <el-row>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="Redis版本" prop="">
              {{ pageData.form.redis_version }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="运行模式" prop="" class="p-l-10px">
              <span v-if="pageData.form.redis_mode === 'standalone'">单机</span>
              <span v-else-if="pageData.form.redis_mode === 'Sentinel'">哨兵</span>
              <span v-else>集群</span>
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="端口" prop="" class="p-l-10px">
              {{ pageData.form.tcp_port }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="客户端数" prop="" class="p-l-10px">
              {{ pageData.form.connected_clients }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="运行时间(天)" prop="">
              {{ pageData.form.uptime_in_days }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="使用内存" prop="" class="p-l-10px">
              {{ pageData.form.used_memory_human }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="使用CPU" prop="" class="p-l-10px">
              {{ pageData.form.used_cpu_user }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="内存配置" prop="" class="p-l-10px">
              {{ pageData.form.maxmemory_human }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="AOF是否开启" prop="">
              <span v-if="pageData.form.aof_enabled === 0">否</span>
              <span v-else>是</span>
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="RDB是否成功" prop="" class="p-l-10px">
              {{ pageData.form.rdb_last_bgsave_status }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="Key数量" prop="" class="p-l-10px">
              {{ pageData.form.db5.keys }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 6 }" :sm="{ span: 6 }">
            <el-form-item label="内存分配器" prop="" class="p-l-10px">
              {{ pageData.form.mem_allocator }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-row :gutter="20" class="m-t-5px">
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card :class="['rounded-md', 'dark:bg-black', isScreen ? 'mb2': '']" shadow="hover">
          <template #header>
            <div style="align-items: center" class="flex">
              <el-icon>
                <PieChart/>
              </el-icon>
              <span class="ml2">信息统计</span>
            </div>
          </template>
          <div id="main" style="height: 350px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :lg="12" :md="12" :sm="24" :xs="24">
        <el-card :class="['rounded-md', 'dark:bg-black']" shadow="hover">
          <template #header>
            <div style="align-items: center" class="flex">
              <el-icon>
                <Odometer/>
              </el-icon>
              <span class="ml2">内存信息</span>
            </div>
          </template>
          <div id="memory" style="height: 350px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">

</style>
